import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import Bottword from '@/modules/Bottword.js';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Button, Input, Modal, message, Drawer, Icon, Layout, Menu } from 'antd';
import styles from './index.less';
import RobotBtn from '@/utils/robotBtn';
import searchImg from '@/assets/knowledge/search.png';
import ydImg from '@/assets/knowledge/yd.png';
const Search = Input.Search;
const LeftTree = React.lazy(() => import('./leftTree'));
const QaList = React.lazy(() => import('./qaList'));
const EditQa = React.lazy(() => import('./editQa'));
const { Header, Content, Footer, Sider } = Layout;

class OverView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nodeId: '',
      nodeIdName: '所有分类',
      close: false,
      qaId: '',
      isUpdate: false,
      nodePath: '',
      code: '',
      noAnswer: false,
      questionCount: '',
      qaListCz: '',
    };
  }

  componentDidMount() {
    if (this.props.location.params) {
      const sortType = this.props.location.params.sortType;
      switch (sortType) {
        case 'noAnswer':
          this.setState({
            noAnswer: true,
          });
          break;
        case 'questionCount':
          this.setState({
            questionCount: sortType,
          });
          break;
        default:
          this.setState({
            questionCount: '',
            noAnswer: false,
          });
      }
    }
  }

  qaListPd = val => {
    //  console.log(val,'导入刷新')
    this.setState({ qaListCz: val });
  };

  // ----树形图方法开始----
  terrNodeId = (nodeId, nodeIdName, nodePath) => {
    console.log(nodePath, '---------------nodePath');

    this.setState({
      nodeId,
      nodeIdName,
      nodePath,
    });
  };

  // 停用启用变更需要刷新列表
  refresh = code => {
    this.setState({ code });
  };
  // ----树形图方法结束----

  // 添加
  showDrawer = (id, categoryId) => {
    this.setState({
      qaId: id,
      close: true,
      nodePath: categoryId,
    });
  };

  onClose = () => {
    this.setState({
      close: false,
      qaId: '',
      isUpdate: true,
    });
    this.child.fetchListBySearch();
  };

  onRef = ref => {
    this.child = ref;
  };

  render() {
    return (
      <Suspense fallback={<PageLoading />}>
        <p className={styles.pageTitle}>知识总览</p>
        <Layout>
          <Sider width={212} style={{ background: '#f0f2f5' }}>
            <Row gutter={16}>
              <Col  span={24} style={{height:'calc(100vh - 200px)'}}>
                <LeftTree
                  qaListCz={this.state.qaListCz}
                  terrNodeId={this.terrNodeId}
                  refresh={this.refresh}
                />
              </Col>
            </Row>
          </Sider>
          <Content style={{ marginLeft: 20 }}>
            <Row gutter={16}>
              <Col>
                <QaList
                  qaListPd={this.qaListPd}
                  code={this.state.code}
                  editQaById={this.showDrawer}
                  categoryId={this.state.nodeId}
                  nodePath={this.state.nodePath}
                  categoryName={this.state.nodeIdName}
                  isUpdate={this.state.isUpdate}
                  onRef={this.onRef}
                  noAnswer={this.state.noAnswer}
                  slotType={this.state.questionCount}
                />
              </Col>
            </Row>
          </Content>
        </Layout>
        <Drawer
          className="zdyset"
          title={
            <span  onClick={this.onClose} style={{cursor:'pointer'}}>
              <Icon type="arrow-left" style={{ marginRight: 20 }} />
              <FormattedMessage id="app.overView.editQa" />
            </span>
          }
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.close}
          width="calc(100vw - 245px)"
          destroyOnClose
          // className={styles.drawer}
        >
          <div className={styles.der}>
            <div className={styles.dabj}>
              <EditQa
                qaId={this.state.qaId}
                categoryIds={this.state.nodePath}
                onClose={this.onClose}
              />
            </div>
          </div>
        </Drawer>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(OverView);
